<template>
    <div class="content">
        <div class="chunk" :style="{ height: nodeHeight + 'px' }"></div>
        <van-tabbar class="tarbbar" inactive-color="#b8b8b8" active-color="#fa162f">
            <van-tabbar-item v-for="item in navbar" :key="item.path" :class="item.class"
                @click="tabbarHandle(item.path)">
                <template #icon="props">
                    <img :src="item.icon" />
                </template>
                {{ item.title }}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import eventBus from "@/common/event-bus";
import tabbarIcon from "@/common/tabbarIcon"
import { Tabbar, TabbarItem } from 'vant';
export default {
    name: "NavigationBar",
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
    },
    props: {
        closeHelp: Function,
    },
    data() {
        return {
            navbar: [{
                title: "首页",
                path: "home",
                icon: tabbarIcon.homeActive,
                class: "van-tabbar-item--active",
            }, {
                title: "分类",
                path: "classify",
                icon: tabbarIcon.classifyInactive,
            }, {
                title: "客服",
                path: "service",
                icon: tabbarIcon.serviceInactive,
            }, {
                title: "我的",
                path: "mine",
                icon: tabbarIcon.mineInactive,
            }],
            nodeHeight: 0,
        }
    },
    mounted() {
        this.nodeHeight = localStorage.getItem("chunkHeight");
    },
    methods: {
        tabbarHandle(path) {
            switch (path) {
                case "service":
                    eventBus.$emit("service");
                    break;
                case "home":
                    this.closeHelp();
                    break;
                default:
                    this.$router.push({ name: path });
                    break;
            }
        }
    },
}
</script>
<style lang="scss">
.tarbbar {
    z-index: 9999;
}
</style>